<template>
  <div>
    <label>抽奖人员：</label>
    <input type="file" @change="importExcel($event.target)" />
    <label>奖项：</label>
    <input type="file" @change="importExcel2($event.target)" value="奖项" />
    <button @click="clear">清理缓存</button>
    <br />
    <button @click="$router.push('/')">去抽奖</button>
    <button @click="downloadExl">获奖名单导出</button>
    <h3>{{status}}</h3>
    <div
      v-for="(item,index) in present"
      :key="'present:'+index"
      class="l_user"
    >
      <span class="l_id">{{item.prize}}</span>--
      <span class="l_id">{{item.name}}</span>--
      <span class="l_name">{{item.num}}</span>
    </div>
    <div v-for="user in users" :key="user.id" class="l_user">
      <!-- <span class="l_id">{{user.id}}</span>-- -->
      <span class="l_id">{{user.department}}</span>--
      <span class="l_name">{{user.name}}</span>
    </div>
  </div>
</template>

<script>
var XLSX = require("xlsx");
import store from "@/vuex/store";
import xlsxExport from "../utils/json2execl.js";
export default {
  store,
  data() {
    return {
      users: [],
      present: [],
      present_num: "",
      status: this.$store.state.status
    };
  },
  watch: {},
  computed: {},
  methods: {
    importExcel(obj) {
      if (!obj.files) {
        return;
      }
      let file = obj.files[0],
        types = file.name.split(".")[1],
        fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(
          item => item === types
        );
      if (!fileType) {
        alert("格式错误！请重新选择");
        return;
      }
      this.file2Xce(file).then(tabJson => {
        if (tabJson && tabJson.length > 0) {
          this.tableHeader = Object.keys(tabJson[0]);
          this.$store.commit("getUsers", tabJson);
          this.users = this.$store.state.users;
        }
      });
    },
    importExcel2(obj) {
      if (!obj.files) {
        return;
      }
      let file = obj.files[0],
        types = file.name.split(".")[1],
        fileType = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"].some(
          item => item === types
        );
      if (!fileType) {
        alert("格式错误！请重新选择");
        return;
      }
      this.file2Xce(file).then(tabJson => {
        if (tabJson && tabJson.length > 0) {
          this.tableHeader = Object.keys(tabJson[0]);
          const len = tabJson.length;
          for (let i = 0; i < len; i++) {
            let item = tabJson[i];
            item.id = "a" + i;
          }
          this.$store.commit("getPresents", tabJson);
          this.$store.commit("getNum", len);
          this.present_num = len;
          this.present = this.$store.state.presents;
        }
      });
    },
    /* eslint-disable */
    file2Xce(file) {
      return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        reader.onload = function(e) {
          let data = e.target.result;
          this.wb = XLSX.read(data, {
            type: "binary"
          });
          resolve(
            XLSX.utils.sheet_to_json(this.wb.Sheets[this.wb.SheetNames[0]])
          );
        };
        reader.readAsBinaryString(file);
      });
    },
    downloadExl() {
      let fields = {
        test1: "id",
        test2: "department",
        test3: "name"
      };
      for (let i = 0; i < this.present_num; i++) {
        var file = window.localStorage.getItem(this.present[i].prize);
        // console.log(file);
        if (file) {
          // console.log(file);
          xlsxExport(JSON.parse(file), fields, `${this.present[i].prize}汇总`);
        }
      }
    },
    clear() {
      window.localStorage.clear();
    }
  },
  created() {
    window.localStorage.removeItem("vuex");
  },
  mounted() {}
};
</script>
<style scoped>
</style>
